import styled, {css} from 'styled-components';

// const complexMixin = css`
//   color: ${props => (props.goldColor ? 'gold' : 'black')};
// `;
/** 上下等价 */
const complexMixin = props => css`
  color: ${props.goldColor ? 'gold' : 'black'};
`;

const StyledComp = styled.div`
  /* This is an example of a nested interpolation */
  ${props => (props.complex ? complexMixin : 'color: blue;')};
`;

export default ()=>(
  <div>
    <StyledComp>StyledComp</StyledComp>
    <StyledComp complex>StyledComp</StyledComp>
    <StyledComp complex goldColor>StyledComp</StyledComp>
  </div>
)
